<template>
  <div class="app-container">
    <!-- <el-form>
            <el-form-item label="主题" prop="province">
                {{ form.province }}
            </el-form-item>
            <el-form-item label="发送人" prop="province">
                {{ form.province }}
            </el-form-item>
            <el-form-item label="接收人" prop="province">
                {{ form.province }}
            </el-form-item>
            <div class="aa" v-html="form.elMessage" />
            <div class="demo-image__lazy">
                <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
            </div>
        </el-form> -->
    <el-form ref="form">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="名字" prop="name">
            {{ form.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" prop="price">
            {{ form.price }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="QQ" prop="qq">
            {{ form.qq }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信" prop="wechat">
            {{ form.wechat }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            {{ form.phone }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市" prop="province">
            {{ form.province }}- {{ form.municipality }}- {{ form.county }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务项目" prop="address">
            {{ form.address }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="remarks">
            {{ form.remarks }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务" prop="services">
            {{ form.services }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remarks">
            {{ form.remarks }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="介绍" prop="introduce">
            {{ form.introduce }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="demo-image__lazy">
            <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文档" prop="field10">
            <!-- <file-upload v-model="form.field10" /> -->
            <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
              <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList" @click="showFileName(file.url)" >
                <el-link :underline="false" target="_blank">
                  <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                </el-link>
              </li>
            </transition-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getUsers } from "@/api/system/users";

export default {
  name: "usersdetails",
  props: {
    // 值
    value: [String, Object, Array],
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      urls: [],
      arr: [],
      // 表单参数
      form: {},
      // 表单校验
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        name: null,
        introduce: null,
        province: null,
        municipality: null,
        county: null,
        address: null,
        qq: null,
        wechat: null,
        phone: null,
        img: null,
        price: null,
        remarks: null,
        createtime: null,
        updatetime: null,
        field10: null,
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: [],
    };
  },
  created() {
    this.infoId = this.$route.query.id;
    this.getList();
  },
  methods: {
    getList() {
      getUsers(this.infoId).then((response) => {
        this.form = response.data;
        const baseApi = process.env.VUE_APP_BASE_API;
        var hostname = window.location.hostname;
        // var currentURL = window.location.href;
        if (response.data.img != null) {
          const imgArray = Array.isArray(response.data.img) ? response.data.img : response.data.img.split(",");
          imgArray.forEach(img => {
            const url = baseApi + img;
            this.urls.push(url);
          });
        }
        debugger
        if (response.data.field10 != null) {
          let temp = 1;
          // 首先将值转为数组
          // 使用split方法按逗号分割字符串
          const filePathsArray = response.data.field10.split(",");
          // 去除可能存在的首尾空格，并创建一个新数组来存储处理后的路径
          const list = [];
          // 遍历文件路径数组，给每个路径添加地址前缀，并添加到list数组中
          for (let i = 0; i < filePathsArray.length; i++) {
            // 去除路径字符串首尾的空格，并添加地址前缀
            const pathWithPrefix = "http://" + hostname + baseApi + filePathsArray[i].trim();
            console.log("文件地址："+pathWithPrefix)
            // 将带有前缀的路径添加到list数组中
            list.push(pathWithPrefix);
          }
          // 然后将数组转为对象数组
          this.fileList = list.map(item => {
            if (typeof item === "string") {
              item = { name: item, url: item };
            }
            item.uid = item.uid || new Date().getTime() + temp++;
            return item;
          });
        } else {
          this.fileList = [];
          return [];
        }
      });
    },
    // 获取文件名称
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    showFileName(url) {
      this.$router.push({ path: "onlinepreview", query: { url: url } });
    },
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
};
</script>
<style>
.demo-image__lazy {
  width: 800px;
}
</style>
<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
